<template>
	<div :class="{'collection':true,'collectionEmpty':listData.length==0} " >
		<div class="divide"></div>
		<div v-for="(item,index) of listData" :key="index" class="list" @click.stop="toPostDetail(item.id)">
			<div  class="list-top">
				<div class="list-thumb">
					<image mode="aspectFill" :src="item.circle_name.img_url_array[0]" v-if="item.circle_name.img_url_array.length!=0"></image>
					<div class="video-wrapper" v-else-if="item.circle_name.video_url_array.length!=0">
						<cover-image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/video.png"></cover-image>
						<video :src="item.circle_name.video_url_array[0]" :controls="false" ></video>
					</div>
					<image mode="aspectFill" :src="item.circle_name.circle_thumb_url" v-else></image>
				</div>
				<div class="list-content">
					<u-parse class="list-content-text"  :content="item.content" @preview="preview" @navigate="navigate" />
				</div>
			</div>
			<div class="circle-name">{{item.circle_name.circle_name}}</div>
		</div>
		<div class="tips" v-if="listData.length!=0">已加载全部</div>
		<div class="no-tips" v-if="listData.length==0">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
			<div>暂未有收藏</div>
		</div>
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		data() {
			return {
				listData:[],
				defaultJpg:defaultJpg,
				pageNum:1,
				limit:10,
				text:'测试1<a style="color:blue" href="/pages/person/personHomepage/personHomepage?userId=2">Zheng、泽</a>案发打发发达发达撒士大夫发生哈哈哈<img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/emoji/113.gif" alt="[哈哈]" style="display:inline-block;width:25px;height:25px"><img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/emoji/113.gif" alt="[嘿嘿]" style="display:inline-block;width:25px;height:25px">'
			};
		},
		components:{uParse},
		methods:{
			formEmoji(text){
				let pattern=/<img.*?alt="(.*?)".*?>/gi;
				return {content:text.replace(pattern,'$1')}
			},
			//跳转帖子详情页面
			toPostDetail(id){
			    uni.navigateTo({
			        url: "/pages/Details/postdetails?post_article_id="+id
			    })
			},
			preview(src, e) {
			      // do something
			    },
			navigate(href, e) {
			  // do something
			  uni.navigateTo({
			  	url:href
			  })
			},
			cancelFollw(type,id,index){
				let that=this
				uni.showModal({
					title:"是否取消关注",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.setInteractive(3,id,index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete(){
						console.log('完成')
					}
				})
			},
			//新增帖子互动记录
			async setInteractive(type,id,index){
			    let params = {
			        user_token: uni.getStorageSync('userToken'),
			        post_article_id : id,
			        action_type: type
			    }
			    const res = await this.$api.setInteractive(params);
			    if (res.data.level == 'error'){
			        uni.showToast({
			            icon:'success',
			            title:res.data.message
			        })
					this.listData.splice(index,1);
			    } else {
					uni.showToast({
					    icon:'fail',
					    title:res.data.message
					})
			    }
				},
			async getFavoritePostArticleList(){
				//获取我(相关）的贴子列表
				let params={
					user_token:uni.getStorageSync('userToken'),
					page:this.pageNum,
					limit:this.limit,
					type:'collect'
				}
				let res=await this.$api.getFavoritePostArticleList(params);
				if(res.data.level=='success'){
					let data=res.data.data||[];
					data=data.map(item=>{
						return Object.assign(item,this.formEmoji(item.content))
					})
					console.log(data)
					this.listData=[...this.listData,...data]
				}
			},
		},
		onLoad() {
			this.getFavoritePostArticleList();
			this.formEmoji((this.text))
		},
		onReachBottom() {
			this.page+=1;
			this.getFavoritePostArticleList()
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.no-tips{
		margin-top:20vh;
		@include flexWrap();
		background: #fff;
		color:#6F7073;
		&>div{
			text-align: center;
			width: 100%;
		}
		}
	.collection{
		background: #F1F4F7;
		min-height: 100vh;
	}
	.collectionEmpty{
		background-color: #fff;
	}
	.tips{
		width:100%;
		text-align: center;
	}
	.divide{
		height: 20rpx;
	}
	.list{
		background: #fff;
		padding:20rpx 20rpx;
		margin-bottom:20rpx;
		.list-top{
		
			@include flex(flex-start);
			.list-thumb{
				margin:0 20rpx 0 0;
				.video-wrapper{
					position: relative;
					cover-image{
						position: absolute;
						width:50rpx;
						height: 50rpx;
						z-index:88;
						top:50%;
						left:50%;
						margin-left:-25rpx;
						margin-top:-25rpx;
					}
				}
				image{
					width:100rpx;
					height: 100rpx;
				}
				video{
					width:100rpx;
					height: 100rpx;
				}
			}
			.list-content{
				@include flex(flex-start);
				image{
					width:80rpx;
					height: 80rpx;
				}
				.list-content-name{
					margin-left: 20rpx;
				}
			}
		}
		.circle-name{
			color: #8b8d93;
			font-size: 26rpx;
			margin:30rpx 0 0rpx;
		}
	}
	
</style>
<style>
	.list-content-text{
		width: 100%;
		/* min-height: 120rpx; */
		max-height: 65rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
	}
</style>
